<template>
	<div class="node-wrap">
		<div class="node-wrap-box start-node" @click="show">
			<div class="title" style="background: #3296fa;">
				<el-icon class="icon"><el-icon-promotion /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
			</div>
			<div class="content">
				<span>{{ toText(nodeConfig) }}</span>
			</div>
		</div>
		<div class="error_tip" v-if="nodeConfig.error">
			<el-icon>
				<Warning />
			</el-icon>
		</div>
		<add-node v-model="nodeConfig.childNode" :currentNode="nodeConfig"></add-node>
		<el-drawer title="抄送人" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{ form.nodeName }}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-row>
							<el-form-item label="抄送人选择">
								<sc-table-select v-model="employeeList" :inputWidth="400" :apiObj="apiObj"
									:fileName="employeeFileName" :table-width="700" multiple clearable collapse-tags
									collapse-tags-tooltip :max-collapse-tags="2" :props="tableProps"
									@change="employeeChange">
								</sc-table-select>
								<div class="tags-list">
									<el-tag v-for="(role, index) in employeeList" :key="role.id" type="info" closable
										@close="delEmployee(index)">{{ role.name }}</el-tag>
								</div>
							</el-form-item>
						</el-row>
						<el-form-item label="表达式标注">
							<el-input v-model="express.name"></el-input>
						</el-form-item>
						<el-form-item label="表达式">
							<el-input v-model="express.id" type="textarea" autosize></el-input>
						</el-form-item>
						<el-alert title="抄送人员不能为空！选择后请点击保存" type="warning" />
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer = false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { ElNotification } from 'element-plus'
import addNode from './addNode.vue'
import sysApi from '@/api/model/system.js'
import { deduplication } from '@/utils/arr.js'
import { Warning } from '@element-plus/icons-vue'
import { copyerStr } from './utils/toText.js'
const props = defineProps({
	modelValue: { type: Object, default: () => { } }
})
const emit = defineEmits(['update:modelValue'])
const nodeConfig = ref(JSON.parse(JSON.stringify(props.modelValue)))
watch(nodeConfig, (newValue) => {
	emit('update:modelValue', newValue)
}, {
	deep: true
})
const drawer = ref(false)
const isEditTitle = ref(false)
const form = ref({})
const express = ref({
	id: '',
	type: 'express',
	name: ''
})
const nodeTitle = ref(null)
const employeeFileName = ref('DeptAndEmployeeReport')
const employeeList = ref([])
const apiObj = ref(sysApi.select.query)
const tableProps = {
	label: 'name',
	value: 'nodeId',
}
onMounted(() => {
	console.log(props.modelValue)
	props.modelValue.nodeUserList.forEach(item => {
		if (item.type !== 'express') {
			employeeList.value.push({ nodeId: item.id, name: item.name, nodeType: item.type })
		}
		else {
			express.value = item
		}

	})
})
const show = () => {
	form.value = JSON.parse(JSON.stringify(nodeConfig.value))
	drawer.value = true
}
const delNode = () => {
	if (nodeConfig.value.childNode) {
		nodeConfig.value.childNode.parentId = nodeConfig.value.parentId
	}
	emit("update:modelValue", nodeConfig.value.childNode)
}
const editTitle = () => {
	isEditTitle.value = true
	nextTick(() => {
		nodeTitle.value.focus()
	})
}
const saveTitle = () => {
	isEditTitle.value = false
}
const delEmployee = (index) => {
	employeeList.value.splice(index, 1)
}
const save = () => {
	console.log(express.value)
	let arr = []
	if (express.value.id && express.value.name) {
		arr.push(express.value)
	}
	employeeList.value.map((item) => {
		arr.push({ id: item.nodeId, name: item.name, type: item.nodeType })
	})
	if (arr.length > 0) {
		form.value.nodeUserList = arr
		form.value.error = false
		emit('update:modelValue', form.value)
	}
	else {
		ElNotification({
			title: '验证错误',
			message: '抄送人不能为空',
			type: 'warning',
		})
		form.value.error = true
	}
}
const toText = (nodeConfig) => {
	console.log(nodeConfig)
	nodeConfig.placeHolder = copyerStr(nodeConfig)
	return copyerStr(nodeConfig)

}
const employeeChange = (val) => {
}
</script>

<style></style>
